{"componentChunkName":"component---src-templates-post-js","path":"/blog/typescript","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🏃‍♂️ TypeScript 以及一些理解和技巧","tips":[],"categories":["code"],"datetime":"2019-11-21 11:47:10","noFooter":false,"description":"TypeScript 真的是一个很伟大的前端静态类型解决方案，已经离不开了，简单列举一些内容~~","plainTextDescription":"TypeScript 真的是一个很伟大的前端静态类型解决方案，已经离不开了，简单列举一些内容\\~~\n","author":"Ubug","banner":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='154'%3e%3cpath%20d='M0%2077v77h401V0H0v77m119-17l4%201h4v13l1%2013c2%200%202-2%202-13l1-12%204-1c3%200%204-1%204-2l-10-1c-8%200-10%200-10%202m79%200c-4%205-3%209%206%2014%205%204%206%207%203%209-2%202-8%202-10%200-1-1-1-1-1%201%201%206%2014%204%2016-1%201-5-1-8-7-12s-7-5-5-8c1-2%202-2%206-2%204%201%205%200%205-1%200-3-9-3-13%200m76%201l-1%202c0%202-1%203-2%203l-2%202%202%201c2%200%202%201%202%208s0%208%202%2010c3%201%206%201%206-2h-1c-2%201-4-2-4-9s0-7%203-7l2-2-2-1c-2%200-3%200-3-3%200-1-1-3-2-2m-141%206l4%2010c4%2011%203%2017-2%2017l-2%202c0%202%204%201%206-1%203-3%2013-28%2012-29-2-1-3%201-6%2010l-3%206a338%20338%200%2001-7-16l-2%201m21%2015c0%2013%200%2015%202%2015l1-6%201-6%203%202c8%204%2015-8%2011-17-3-4-9-6-12-2l-2%201-1-1-1-2c-2%200-2%202-2%2016m25-14c-6%205-5%2016%202%2019%204%202%2011%200%2011-3h-2c-5%202-11%200-11-4%200-2%201-2%207-2h7v-4c-1-7-8-10-14-6m39%201c-6%205-4%2017%204%2018%203%201%208%200%208-3h-2c-5%203-10-1-10-7s3-8%208-8c3%201%204%201%204-1-1-3-8-3-12%201m32%2013c0%2013%200%2015%202%2015l1-6v-6l3%202c4%201%207%201%2010-3%204-3%204-12%200-15-3-3-8-4-10-1l-2%201-1-1-1-2c-2%200-2%202-2%2016m-90-11c-5%204-3%2014%203%2014%205%200%209-10%205-14-2-2-6-2-8%200m96-1c-3%202-4%2010-1%2013%204%204%2010%201%2010-6s-4-10-9-7'%20fill='%23573ede'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":2.6,"src":"/static/dee044e1845238d1a65fdad7a74d6b22/5c45c/typescript.png","srcSet":"/static/dee044e1845238d1a65fdad7a74d6b22/82675/typescript.png 500w,\n/static/dee044e1845238d1a65fdad7a74d6b22/5c45c/typescript.png 832w","srcWebp":"/static/dee044e1845238d1a65fdad7a74d6b22/52485/typescript.webp","srcSetWebp":"/static/dee044e1845238d1a65fdad7a74d6b22/7fe04/typescript.webp 500w,\n/static/dee044e1845238d1a65fdad7a74d6b22/52485/typescript.webp 832w","sizes":"(max-width: 832px) 100vw, 832px"}}},"bannerCredit":"Banner from [typescript](https://www.memsql.com/blog/porting-30k-lines-of-code-from-flow-to-typescript/)","slug":"/blog/typescript","tags":["整理","TypeScript","TS","前端"]},"headings":[{"value":"1. 可推断编程的体验","depth":3},{"value":"2. type 和 interface 的区别","depth":3},{"value":"3. 不要使用 Any!不要使用 Any!","depth":3},{"value":"4. 明确可以自动推断的，可以不用写类型声明","depth":3},{"value":"5. any, unknow","depth":3},{"value":"6. never","depth":3},{"value":"7. 类型泛型运算","depth":3},{"value":"8. 内置的一些辅助函数","depth":3},{"value":"9. 配合 JSDoc 进行注释","depth":3},{"value":"10. class 继承不同的赋值方法的代码提示","depth":3}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"typescript\",\n  \"title\": \"🏃‍♂️ TypeScript 以及一些理解和技巧\",\n  \"date\": \"2019-11-21 11:47:10\",\n  \"author\": \"Ubug\",\n  \"description\": \"TypeScript 真的是一个很伟大的前端静态类型解决方案，已经离不开了，简单列举一些内容~~\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"整理\", \"TypeScript\", \"TS\", \"前端\"],\n  \"banner\": \"./typescript.png\",\n  \"bannerCredit\": \"Banner from [typescript](https://www.memsql.com/blog/porting-30k-lines-of-code-from-flow-to-typescript/)\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h3\", null, \"1. \\u53EF\\u63A8\\u65AD\\u7F16\\u7A0B\\u7684\\u4F53\\u9A8C\"), mdx(\"p\", null, \"\\u771F\\u6B63\\u7684\\u9762\\u5411\\u63A5\\u53E3\\u7F16\\u7A0B\\uFF0C\\u66F4\\u81EA\\u7136\\u5B8C\\u5907\\u7684\\u6A21\\u5757\\u548C\\u903B\\u8F91\\u62BD\\u8C61\\uFF0C\\u8BA9\\u524D\\u7AEF\\u5F00\\u53D1\\u7684\\u601D\\u7EF4\\u65B9\\u5F0F\\u4ECE\\u600E\\u4E48\\u5B9E\\u73B0\\u7ED3\\u679C\\uFF0C\\u53D8\\u6210\\u4E86\\u66F4\\u9AD8\\u8D28\\u91CF\\u7684\\u9700\\u6C42\\u4EA4\\u4ED8\\uFF0C\\u53BB\\u601D\\u8003\\u63A5\\u53E3\\u7684\\u8F93\\u5165\\u8F93\\u51FA\\uFF0C\\u53BB\\u8BBE\\u8BA1\\u6A21\\u5757\\u548C\\u4EE3\\u7801\\uFF0C\\u66F4\\u4F55\\u51B5\\u4EC5\\u4EC5\\u662F\\u4EE3\\u7801\\u63D0\\u793A\\u548C\\u5BF9\\u63A5\\u8054\\u8C03\\u5C31\\u8DB3\\u591F\\u8BA9\\u4F60\\u723D\\u7FFB\\u5929\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u590D\\u6742\\u6A21\\u5757\\u4E4B\\u95F4\\u7684\\u96C6\\u6210\\u4ECE\\u6765\\u4E0D\\u662F\\u90A3\\u4E48\\u987A\\u5229\\uFF0C\\u529F\\u80FD\\u7684\\u5347\\u7EA7\\u91CD\\u6784\\u3001\\u9879\\u76EE\\u7684\\u4EA4\\u63A5\\u4E00\\u76F4\\u662F\\u5F00\\u53D1\\u5F88\\u91CD\\u8981\\u7684\\u4E00\\u90E8\\u5206\\uFF0C\\u8FD9\\u5757\\u7ECF\\u5E38\\u4F1A\\u51FA\\u73B0\\u95EE\\u9898\\uFF0C\\u56E0\\u4E3A\\u5E76\\u4E0D\\u662F\\u6BCF\\u4E2A\\u4EBA\\u3001\\u6BCF\\u6B21\\u90FD\\u80FD\\u6E05\\u695A\\u7684\\u8BB0\\u4F4F\\u9879\\u76EE\\u7684\\u63A5\\u53E3\\u3001\\u53C2\\u6570\\u3001\\u7C7B\\u578B\\u7B49\\uFF0C\\u8FD9\\u5757\\u51FA\\u73B0\\u7684\\u9519\\u8BEF\\u5728\\u524D\\u7AEF\\u5360\\u4E86\\u5F88\\u5927\\u4E00\\u4E2A\\u6BD4\\u4F8B\\uFF0C\\u6240\\u4EE5\\u5F88\\u591A\\u7684\\u6D4B\\u8BD5\\u624D\\u80FD\\u8986\\u76D6\\u8FD9\\u5757\\u7684\\u8D28\\u91CF\\u4FDD\\u8BC1\\u3002\\u53EF\\u662F\\uFF0C\\u8FD9\\u5BF9\\u4E8E\\u9759\\u6001\\u8BED\\u8A00\\u5176\\u5B9E\\u5E76\\u4E0D\\u662F\\u95EE\\u9898\\u3002\"), mdx(\"p\", null, \"\\u4E4B\\u524D\\u7684\\u524D\\u7AEF\\u4EE3\\u7801\\u63D0\\u793A\\u4F9D\\u8D56\\u4E8E document \\u6CE8\\u91CA\\uFF0C\\u8FD9\\u5176\\u5B9E\\u5BF9\\u5F88\\u591A\\u4EBA\\u662F\\u4E00\\u79CD\\u8D1F\\u62C5\\uFF0C\\u5F88\\u591A\\u4EBA\\u53EA\\u4F7F\\u7528\\u5185\\u7F6E\\u7684\\u5B98\\u65B9\\u63D0\\u793A\\uFF0C\\u4E0D\\u80FD\\u4EAB\\u53D7\\u7C7B\\u578B\\u601D\\u7EF4\\u7684\\u597D\\u5904\\u3002TS \\u4F7F\\u7528\\u4E00\\u4E9B\\u6807\\u8BB0\\u548C\\u7C7B\\u578B\\u58F0\\u660E\\u80FD\\u591F\\u5F88\\u597D\\u7684\\u5B9E\\u73B0\\u5B8C\\u6574\\u7684\\u4EE3\\u7801\\u63D0\\u793A\\uFF0C\\u5E26\\u6709\\u4EE3\\u7801\\u63D0\\u793A\\u7684\\u7F16\\u7A0B\\u4F53\\u9A8C\\u80FD\\u8BA9\\u6548\\u7387\\u548C\\u8D28\\u91CF\\u66F4\\u597D\\uFF0C\\u81F3\\u5C11\\u4EE3\\u7801\\u8D28\\u91CF\\u91CC\\u9762\\u9759\\u6001\\u68C0\\u67E5\\u6CA1\\u6709\\u95EE\\u9898\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u8FD9\\u90FD\\u662F Typescript \\u5E26\\u6765\\u7684\\u91CD\\u8981\\u7279\\u6027\\uFF0CTS \\u80FD\\u5E2E\\u6211\\u4EEC\\u68B3\\u7406\\u6E05\\u4E0D\\u540C\\u7684\\u63A5\\u53E3\\u3001\\u5929\\u751F\\u7684\\u8BA9\\u4F60\\u77E5\\u9053\\u8FD9\\u4E2A\\u63A5\\u53E3\\u5E94\\u8BE5\\u600E\\u4E48\\u6837\\u7684\\uFF0C\\u5728\\u8FD0\\u884C\\u65F6\\u624D\\u80FD\\u770B\\u5230\\u7684\\u95EE\\u9898\\u5728\\u5F00\\u53D1\\u7684\\u65F6\\u5019\\u5C31\\u5F88\\u660E\\u663E\\u7684\\u66B4\\u9732\\u4E86\\u3002\"), mdx(\"h3\", null, \"2. type \\u548C interface \\u7684\\u533A\\u522B\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"TL;DR: \\u5185\\u90E8\\u4F7F\\u7528\\u53EA\\u8981\\u7A0B\\u5E8F\\u4E00\\u81F4\\uFF0C\\u90FD\\u53EF\\u4EE5\\uFF0Ctype \\u66F4\\u77ED\\u66F4\\u7075\\u6D3B\\u3002\\u63D0\\u4F9B\\u7B2C\\u4E09\\u65B9\\u5E93\\u58F0\\u660E\\u7684\\u65F6\\u5019\\u8BF7\\u4F7F\\u7528 interface\\u3002\")), mdx(\"p\", null, \"\\u521A\\u63A5\\u89E6\\u7684\\u65F6\\u5019\\u90FD\\u4F1A\\u7EA0\\u7ED3\\u5230\\u5E95\\u662F\\u7528\\u54EA\\u4E2A\\u6765\\u5B9A\\u4E49\\u7C7B\\u578B\\uFF0C\\u5B98\\u7F51\\u7684\\u8BF4\\u660E\\u4E2D\\u4E00\\u822C\\u662F\\u8FD9\\u4E48\\u53EB\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"interface = interface types\"), \" \\u63A5\\u53E3\\u7C7B\\u578B\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type = type aliases\"), \" \\u7C7B\\u578B\\u522B\\u540D\\u3002\\u4F46\\u662F\\u5B98\\u7F51\\u5F88\\u591A\\u8868\\u8FF0\\u73B0\\u5728\\u6709\\u70B9\\u95EE\\u9898\\uFF0C\\u76EE\\u524D\\u53EF\\u4EE5\\u53C2\\u8003 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://medium.com/@martin_hotell/interface-vs-type-alias-in-typescript-2-7-2a8f1777af4c\"\n  }, \"Interface vs Type alias in TypeScript 2.7\"), \"\\u3002\"), mdx(\"p\", null, \"\\u547D\\u540D\\u4E0A\\u4E00\\u4E2A\\u5F3A\\u8C03\\u63A5\\u53E3\\uFF0C\\u4E00\\u4E2A\\u5F3A\\u8C03\\u522B\\u540D\\uFF0C\\u6240\\u4EE5\\u6309\\u7167\\u6211\\u7684\\u7406\\u89E3\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"interface \\u4F5C\\u4E3A\\u4E00\\u4E2A\\u6574\\u4F53\\u6765\\u63CF\\u8FF0\\u4E00\\u4E2A\\u5B9E\\u4F53\\u63A5\\u53E3\\u3002\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"type \\u4F5C\\u4E3A\\u522B\\u540D\\u4F7F\\u7528\\uFF0C\\u4E00\\u822C\\u8F83\\u591A\\u7684\\u8868\\u793A\\u96C6\\u5408\\u6982\\u5FF5\\u3002\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u4E8C\\u8005\\u5728\\u8868\\u793A\\u5E38\\u89C1\\u7684\\u7ED3\\u6784\\u65F6\\uFF0C\\u53EF\\u4EE5\\u4E92\\u76F8\\u8F6C\\u6362\\u3002\"))), mdx(\"p\", null, \"\\u6BD4\\u5982 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"interface\"), \" \\u5F3A\\u8C03 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"People\"), \" \\u4EBA\\u7684\\u6570\\u636E\\u7ED3\\u6784\\uFF0C\\u5B8C\\u6574\\u7684\\u7C7B\\u578B\\u3002\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" \\u5F3A\\u8C03\\u4E00\\u4E2A\\u6709\\u59D3\\u540D\\u3001\\u5E74\\u9F84\\u7B49\\u5C5E\\u6027\\u7684\\u96C6\\u5408\\u4F53\\uFF0C\\u522B\\u540D\\u548C\\u96C6\\u5408\\u3002\\u6211\\u4EEC\\u5E73\\u65F6\\u4F7F\\u7528\\u7684\\u65F6\\u5019\\uFF0C\\u4E0D\\u9700\\u8981\\u523B\\u610F\\u5F3A\\u8C03\\u54EA\\u4E2A\\u662F\\u5BF9\\u7684\\uFF0C\\u56E0\\u4E3A\\u5927\\u90E8\\u5206\\u65F6\\u5019\\u65E0\\u8BBA\\u58F0\\u660E \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"interface\"), \" \\u8FD8\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"type\"), \" \\u5BF9\\u4E8E\\u7A0B\\u5E8F\\u903B\\u8F91\\u90FD\\u662F\\u6709\\u610F\\u4E49\\u53EF\\u63A8\\u65AD\\u7684\\uFF0C\\u5927\\u90E8\\u5206\\u65F6\\u5019\\u4E5F\\u662F\\u53EF\\u4EE5\\u4E92\\u76F8\\u8F6C\\u6362\\u7684\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"interface People {\\n  name: string;\\n  age: number;\\n}\\n\")), mdx(\"p\", null, \"\\u5927\\u90E8\\u5206\\u60C5\\u51B5\\u53EF\\u4EE5\\u5199\\u6210\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"type People = {\\n  name: string;\\n  age: number;\\n}\\n\")), mdx(\"p\", null, \"\\u4E8C\\u8005\\u4E4B\\u95F4\\u4E00\\u4E9B\\u4E0D\\u540C\\u7684\\u8BED\\u6CD5\\uFF0C\\u6BD4\\u5982\\u53EA\\u6709 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"interface\"), \" \\u53EF\\u4EE5\\u6709\\u58F0\\u660E\\u5408\\u5E76 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"declaration merging\"), \" \\u4E00\\u822C\\u591A\\u4EBA\\u534F\\u4F5C\\u6216\\u8005\\u7B2C\\u4E09\\u65B9\\u63A5\\u53E3\\u6269\\u5C55\\u6BD4\\u8F83\\u6709\\u7528\\u3002\"), mdx(\"h3\", null, \"3. \\u4E0D\\u8981\\u4F7F\\u7528 Any!\\u4E0D\\u8981\\u4F7F\\u7528 Any!\"), mdx(\"p\", null, \"\\u63A5\\u89E6 TS \\u521A\\u5F00\\u59CB\\uFF0C\\u5F88\\u591A\\u7684\\u7C7B\\u578B\\u58F0\\u660E\\u8BA4\\u4E3A\\u6CA1\\u5FC5\\u8981\\uFF0C\\u53EF\\u4EE5\\u7701\\u7565\\uFF0C\\u6240\\u4EE5\\u6DFB\\u52A0\\u4E86\\u5F88\\u591A\\u7684 any \\u5230\\u4EE3\\u7801\\u91CC\\u9762\\uFF0C\\u4F46\\u662F\\u8FD9\\u662F\\u5F88\\u4E0D\\u597D\\u7684\\u7F16\\u7A0B\\u5B9E\\u8DF5\\u3002\"), mdx(\"p\", null, \"\\u9664\\u975E\\u7B2C\\u4E09\\u65B9\\u4EE3\\u7801\\uFF0C\\u4E0D\\u8981\\u4F7F\\u7528 any \\u6765\\u4EC5\\u4EC5\\u4E3A\\u4E86\\u53BB\\u9664\\u7EA2\\u7EBF\\u63D0\\u793A\\uFF0C\\u53EF\\u4EE5\\u4F7F\\u7528\\u81EA\\u52A8\\u63A8\\u65AD\\u6765\\u51CF\\u5C11 any \\u7684\\u4F7F\\u7528\\u3002\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"any \\u662F\\u4E00\\u4E2A\\u4EE3\\u7801 bug \\u9690\\u60A3\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4EE3\\u7801\\u7684\\u6BCF\\u4E00\\u4E2A\\u89D2\\u843D\\u90FD\\u9700\\u8981\\u7C7B\\u578B\\u58F0\\u660E\\uFF0C\\u4E0D\\u8981\\u4EE5\\u4E3A\\u6A21\\u5757\\u7B80\\u5355\\u3001\\u975E\\u6838\\u5FC3\\u5C31\\u76F4\\u63A5 any \\u4E86\\u4E8B\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4EE3\\u7801\\u7684\\u91CD\\u6784\\u5982\\u679C\\u6CA1\\u6709\\u7C7B\\u578B\\u58F0\\u660E\\u652F\\u6301\\u5C06\\u4F1A\\u5F88\\u4E0D\\u53EF\\u9760\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u6CA1\\u6709\\u81EA\\u52A8\\u8865\\u5168\\u652F\\u6301\")), mdx(\"p\", null, \"\\u5C3D\\u53EF\\u80FD\\u7684\\u5C06\\u4E0D\\u80FD\\u81EA\\u52A8\\u63A8\\u65AD\\u7684\\u7C7B\\u578B\\u624B\\u52A8\\u6807\\u6CE8\\u7C7B\\u578B\\u58F0\\u660E\\uFF0C\\u8FD9\\u662F\\u7F16\\u7A0B\\u7684\\u4E00\\u90E8\\u5206\\u3002\"), mdx(\"h3\", null, \"4. \\u660E\\u786E\\u53EF\\u4EE5\\u81EA\\u52A8\\u63A8\\u65AD\\u7684\\uFF0C\\u53EF\\u4EE5\\u4E0D\\u7528\\u5199\\u7C7B\\u578B\\u58F0\\u660E\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// \\u660E\\u786E\\u7C7B\\u578B\\u7684\\u503C\\u521D\\u59CB\\u5316\\uFF0C\\u80FD\\u591F\\u81EA\\u52A8\\u63A8\\u5012\\u53D8\\u91CF\\u7C7B\\u578B\\nlet someVal = 10;\\nconst someObj = { key1: 'val1', key2: 100 }\\n// ======== \\u4F46\\u662F\\u4E0D\\u80FD\\u5B8C\\u5907\\u521D\\u59CB\\u5316\\u7684\\u9664\\u5916\\uFF0C\\u4F8B\\u5982\\u4E0B\\u9762\\u5C31\\u4F1A\\u51FA\\u9519\\nconst someObj2 = {}\\nsomeObj2.x = 3;\\nsomeObj2.y = 4\\n\")), mdx(\"h3\", null, \"5. any, unknow\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"any \\u8868\\u793A\\u201C\\u8FD9\\u4E2A\\u6570\\u636E\\u53EF\\u80FD\\u662F\\u4EFB\\u4F55\\u7C7B\\u578B\\uFF0C\\u4E0D\\u7528\\u7BA1\\u201D\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"unknow \\u8868\\u793A\\u201C\\u8FD9\\u4E2A\\u6570\\u636E\\u4E0D\\u77E5\\u9053\\u662F\\u4EC0\\u4E48\\u7C7B\\u578B\\uFF0C\\u9700\\u8981\\u8FDB\\u4E00\\u6B65\\u68C0\\u67E5\\u201D\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"let a: any = '123';\\na.say(); // \\u9759\\u6001\\u68C0\\u67E5\\u4E0D\\u4F1A\\u63D0\\u793A\\u95EE\\u9898\\n\\nlet a: unknow = '123';\\na.say(); // \\u9759\\u6001\\u68C0\\u67E5\\u4F1A\\u63D0\\u793A \\\"Object is of type 'unknown'\\\"\\n\\n// \\u81EA\\u52A8\\u63A8\\u65AD\\u540E\\u6536\\u7A84\\u7C7B\\u578B\\uFF0C\\u5141\\u8BB8\\u9759\\u6001\\u68C0\\u67E5\\u901A\\u8FC7\\nif (typeof a.say === 'function') {\\n  a.say();\\n}\\n\")), mdx(\"p\", null, \"unknown \\u7C7B\\u578B\\u8981\\u6BD4 any \\u5B89\\u5168\\u5F97\\u591A\\uFF0C\\u5F3A\\u5236\\u6211\\u4EEC\\u5FC5\\u987B\\u8FDB\\u884C\\u68C0\\u67E5\\u624D\\u80FD\\u8FDB\\u4E00\\u6B65\\u6267\\u884C\\uFF0C\\u80FD\\u591F\\u907F\\u514D\\u8FD0\\u884C\\u65F6\\u7684\\u7C7B\\u578B\\u9519\\u8BEF\\u3002\\u4F46\\u662F\\u53EF\\u80FD\\u8FD9\\u4E2A\\u5F3A\\u5236\\u6027\\u6709\\u4E9B\\u5DE5\\u4F5C\\u91CF\\uFF0C\\u6240\\u4EE5\\u53EF\\u80FD\\u5F88\\u591A\\u4EBA\\u8FD8\\u662F any\\u3002\"), mdx(\"h3\", null, \"6. never\"), mdx(\"p\", null, \"\\u4FDD\\u62A4\\u6027\\u7C7B\\u578B\\u3001\\u515C\\u5E95\\u7C7B\\u578B\\u3001\\u5E95\\u90E8\\u7C7B\\u578B\\u3001\\u96F6\\u7C7B\\u578B\\u6216\\u7A7A\\u7C7B\\u578B\\u7B49\\u53EB\\u6CD5\\uFF0C\\u6BD4\\u5982\\u4E0B\\u9762\\u4E00\\u4E2A\\u5E38\\u89C1\\u7684\\u9700\\u6C42\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"type Foo = string | number;\\n\\nfunction runBar(foo: Foo) {\\n  if(typeof foo === \\\"string\\\") {\\n    // \\u8FD9\\u91CC foo \\u88AB\\u6536\\u7A84\\u4E3A string \\u7C7B\\u578B\\n  } else if(typeof foo === \\\"number\\\") {\\n    // \\u8FD9\\u91CC foo \\u88AB\\u6536\\u7A84\\u4E3A number \\u7C7B\\u578B\\n  }\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u6BB5\\u4EE3\\u7801\\u662F\\u6CA1\\u6709\\u95EE\\u9898\\u7684\\uFF0C\\u63A5\\u6536\\u7684\\u503C\\u6709\\u4E0D\\u540C\\u7684\\u7C7B\\u578B\\u6709\\u4E0D\\u540C\\u7684\\u5904\\u7406\\uFF0C\\u9759\\u6001\\u68C0\\u67E5\\u3001\\u8FD0\\u884C\\u65F6\\u90FD\\u80FD\\u901A\\u8FC7\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u5982\\u679C\\u534F\\u4F5C\\u7684\\u65F6\\u5019\\u51FA\\u73B0\\u95EE\\u9898\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"- type Foo = string | number;\\n+ type Foo = string | number | boolean;\\n\\n function runBar(foo: Foo) {\\n   if(typeof foo === \\\"string\\\") {\\n     // \\u8FD9\\u91CC foo \\u88AB\\u6536\\u7A84\\u4E3A string \\u7C7B\\u578B\\n   } else if(typeof foo === \\\"number\\\") {\\n     // \\u8FD9\\u91CC foo \\u88AB\\u6536\\u7A84\\u4E3A number \\u7C7B\\u578B\\n   }\\n }\\n\")), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u65F6\\u5019\\u9759\\u6001\\u68C0\\u67E5\\u4E0D\\u4F1A\\u62A5\\u9519\\uFF0C\\u8FD0\\u884C\\u65F6\\u4E5F\\u4E0D\\u4F1A\\u62A5\\u9519\\uFF0C\\u4F46\\u662F\\u903B\\u8F91\\u4E0A\\u5C31\\u662F\\u6709\\u95EE\\u9898\\u7684\\uFF0C\\u6240\\u4EE5\\u521A\\u5F00\\u59CB\\u5E94\\u8BE5\\u4F7F\\u7528 never \\u6765\\u63A7\\u5236\\u7C7B\\u578B\\u7684\\u6D41\\u52A8\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"type Foo = string | number;\\n\\nfunction runBar(foo: Foo) {\\n  if(typeof foo === \\\"string\\\") {\\n    // \\u8FD9\\u91CC foo \\u88AB\\u6536\\u7A84\\u4E3A string \\u7C7B\\u578B\\n  } else if(typeof foo === \\\"number\\\") {\\n    // \\u8FD9\\u91CC foo \\u88AB\\u6536\\u7A84\\u4E3A number \\u7C7B\\u578B\\n  } else {\\n    // foo \\u5728\\u8FD9\\u91CC\\u662F never\\n    const check: never = foo;\\n  }\\n}\\n\")), mdx(\"p\", null, \"\\u522B\\u4EBA\\u6539\\u52A8\\u4E4B\\u540E\\u7F16\\u8BD1\\u9636\\u6BB5\\u5C31\\u80FD\\u53D1\\u73B0\\u8FD9\\u91CC\\u7684\\u95EE\\u9898\\u3002\"), mdx(\"h3\", null, \"7. \\u7C7B\\u578B\\u6CDB\\u578B\\u8FD0\\u7B97\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"interface ComponentProps {\\n  prop1: string;\\n}\\ninterface ComponentPropsWithChildren{\\n  prop1: string;\\n  children: React.ReactNode\\n}\\n// =========== \\u53EF\\u4EE5\\u8F6C\\u5316\\u4E3A\\nimport { PropsWithChildren } from 'react';\\ninterface ComponentPropsWithChildren = PropsWithChildren<ComponentProps>\\n\")), mdx(\"p\", null, \"\\u7528 Pick \\u64CD\\u4F5C\\u7B80\\u5316\\u7C7B\\u578B\\u58F0\\u660E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"interface Adult {\\n  name: string;\\n  age: number;\\n  job: string;\\n}\\ninterface Child {\\n  name: string;\\n  age: number;\\n}\\n// =========== \\u53EF\\u4EE5\\u8F6C\\u5316\\u4E3A\\ntype Child = {\\n  [k in 'name' | 'age'] : Adult[k]\\n}\\n// =========== \\u4E5F\\u53EF\\u4EE5\\u8F6C\\u5316\\u4E3A\\ntype Child = Pick<Adult, 'name', 'age'>\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"type SomeObject = { [ key: string ]: string }\\n// =========== \\u4E5F\\u53EF\\u4EE5\\u8F6C\\u5316\\u4E3A\\ntype SomeObject = Record<string,string>\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"interface UserLoginType {\\n  username: string;\\n  id: number;\\n  avatar: string;\\n  token: string;\\n}\\n// \\u7528 Omit \\u5254\\u9664\\u5C5E\\u6027\\ntype UserInfo = Omit<UserLoginType, 'token'>\\n\")), mdx(\"p\", null, \"\\u53EF\\u4EE5\\u907F\\u514D\\u4E00\\u4E9B\\u91CD\\u590D\\u7684\\u4EE3\\u7801\"), mdx(\"h3\", null, \"8. \\u5185\\u7F6E\\u7684\\u4E00\\u4E9B\\u8F85\\u52A9\\u51FD\\u6570\"), mdx(\"p\", null, \"TS \\u7684\\u6CDB\\u578B\\u662F\\u5F88\\u5F3A\\u5927\\u7684\\u6982\\u5FF5\\uFF0C\\u5728\\u5F88\\u591A\\u6846\\u67B6\\u4E2D\\u90FD\\u80FD\\u770B\\u5230\\u8EAB\\u5F71\\uFF0C\\u662F\\u9759\\u6001\\u7C7B\\u578B\\u63A8\\u65AD\\u5F88\\u91CD\\u8981\\u7684\\u4E00\\u4E2A\\u5730\\u65B9\\u3002ts \\u7684 lib \\u58F0\\u660E\\u6587\\u4EF6\\u4E2D\\u6BD4\\u5982 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"lib.es5.d.ts\"), \" \\u6709\\u5F88\\u591A\\u6709\\u610F\\u601D\\u7684\\u8F85\\u52A9\\u6CDB\\u578B\\u7C7B\\u578B\\u3002\"), mdx(\"p\", null, \"\\u6BCF\\u4E00\\u4E2A\\u90FD\\u5F88\\u7B80\\u6D01\\uFF0C\\u90FD\\u662F\\u62BD\\u8C61\\u51FA\\u6765\\u7684\\u7C7B\\u578B\\u64CD\\u4F5C\\uFF0C\\u6BD4\\u5982\\u4E0A\\u9762\\u8BF4\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Pick\"), \"\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"class Model<S> {\\n  state: Readonly<S>;\\n  setState = <K extends keyof S>(state: Pick<S, K>) => {\\n    this.state = { ...this.state, ...state };\\n  };\\n}\\n\\n// ========= \\u5F88\\u7B80\\u5355\\u7684\\u7528 Pick \\u6765\\u53EA\\u5141\\u8BB8\\u76EE\\u6807\\u7C7B\\u578B\\u7684 key \\u7684\\u8F93\\u5165\\n\\ntype TodoState = {\\n  list: string[];\\n  lastUpdate: string;\\n}\\n\\nconst todoModel = new Model<TodoState>();\\ntodoModel.setState({\\n  list: ['a1', 'b2'],\\n  lastUpdate: '12:01',\\n})\\ntodoModel.setState({\\n  unknowKey: '123' // \\u7C7B\\u578B\\u201C{ unknowKey: string; }\\u201D\\u7684\\u53C2\\u6570\\u4E0D\\u80FD\\u8D4B\\u7ED9\\u7C7B\\u578B\\u201CPick<TodoState, \\\"list\\\" | \\\"lastUpdate\\\">\\u201D\\u7684\\u53C2\\u6570\\u3002 ts(2345)\\n})\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"/**\\n * Extracts the type of the 'this' parameter of a function type, or 'unknown' if the function type has no 'this' parameter.\\n */\\ntype ThisParameterType<T> = T extends (this: infer U, ...args: any[]) => any ? U : unknown;\\n\\n/**\\n * Removes the 'this' parameter from a function type.\\n */\\ntype OmitThisParameter<T> = unknown extends ThisParameterType<T> ? T : T extends (...args: infer A) => infer R ? (...args: A) => R : T;\\n\\n/**\\n * Make all properties in T optional\\n */\\ntype Partial<T> = {\\n    [P in keyof T]?: T[P];\\n};\\n\\n/**\\n * Make all properties in T required\\n */\\ntype Required<T> = {\\n    [P in keyof T]-?: T[P];\\n};\\n\\n/**\\n * Make all properties in T readonly\\n */\\ntype Readonly<T> = {\\n    readonly [P in keyof T]: T[P];\\n};\\n\\n/**\\n * From T, pick a set of properties whose keys are in the union K\\n */\\ntype Pick<T, K extends keyof T> = {\\n    [P in K]: T[P];\\n};\\n\\n/**\\n * Construct a type with a set of properties K of type T\\n */\\ntype Record<K extends keyof any, T> = {\\n    [P in K]: T;\\n};\\n\\n/**\\n * Exclude from T those types that are assignable to U\\n */\\ntype Exclude<T, U> = T extends U ? never : T;\\n\\n/**\\n * Extract from T those types that are assignable to U\\n */\\ntype Extract<T, U> = T extends U ? T : never;\\n\\n/**\\n * Construct a type with the properties of T except for those in type K.\\n */\\ntype Omit<T, K extends keyof any> = Pick<T, Exclude<keyof T, K>>;\\n\\n/**\\n * Exclude null and undefined from T\\n */\\ntype NonNullable<T> = T extends null | undefined ? never : T;\\n\\n/**\\n * Obtain the parameters of a function type in a tuple\\n */\\ntype Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;\\n\\n/**\\n * Obtain the parameters of a constructor function type in a tuple\\n */\\ntype ConstructorParameters<T extends new (...args: any) => any> = T extends new (...args: infer P) => any ? P : never;\\n\\n/**\\n * Obtain the return type of a function type\\n */\\ntype ReturnType<T extends (...args: any) => any> = T extends (...args: any) => infer R ? R : any;\\n\\n/**\\n * Obtain the return type of a constructor function type\\n */\\ntype InstanceType<T extends new (...args: any) => any> = T extends new (...args: any) => infer R ? R : any;\\n\\n/**\\n * Marker for contextual 'this' type\\n */\\ninterface ThisType<T> { }\\n\\n\")), mdx(\"h3\", null, \"9. \\u914D\\u5408 JSDoc \\u8FDB\\u884C\\u6CE8\\u91CA\"), mdx(\"p\", null, \"\\u7C7B\\u578B\\u58F0\\u660E\\u5F88\\u597D\\u7528\\uFF0C\\u4F46\\u662F\\u6CA1\\u529E\\u6CD5\\u52A0\\u6CE8\\u91CA\\uFF0C\\u6CE8\\u91CA\\u7684\\u6DFB\\u52A0\\u8FD8\\u662F\\u4F9D\\u9760 JSDoc \\u7B49\\u5DE5\\u5177\\uFF0C\\u4F46\\u662F\\u4E0D\\u9700\\u8981\\u5199\\u7C7B\\u578B\\uFF08\\u907F\\u514D\\u7C7B\\u578B\\u4E0E ts \\u4E0D\\u4E00\\u81F4\\uFF09\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"interface People {\\n  /**\\n   * \\u7528\\u6237\\u540D\\n  */\\n  name: string;\\n}\\n/**\\n * uid: user id \\u7528\\u6237\\u7684 id\\n*/\\nfunction callSomeOne(uid: number){\\n  // # ...\\n}\\n\")), mdx(\"h3\", null, \"10. class \\u7EE7\\u627F\\u4E0D\\u540C\\u7684\\u8D4B\\u503C\\u65B9\\u6CD5\\u7684\\u4EE3\\u7801\\u63D0\\u793A\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u5E76\\u4E0D\\u662F ts \\u7684\\u7279\\u6027\\uFF0C\\u5F88\\u591A\\u65F6\\u5019\\u770B\\u5230\\u4E86\\u4E0D\\u540C\\u7684\\u4EE3\\u7801\\u98CE\\u683C\\uFF0C\\u6BD4\\u5982\\u4E0B\\u9762\\u7684\\u4E24\\u79CD\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\",\n    \"metastring\": \"{2-4}\",\n    \"{2-4}\": true\n  }, \"class DemoCom extends React.Component<{}, TDemoState> {\\n  state = {\\n    statusPool: {}\\n  }\\n  action = () => {\\n    this.state\\n  }\\n};\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\",\n    \"metastring\": \"{4-6}\",\n    \"{4-6}\": true\n  }, \"class DemoCom extends React.Component<{}, TDemoState> {\\n  constructor(){\\n    super();\\n    this.state = {\\n      statusPool: {}\\n    }\\n  }\\n  action = () => {\\n    this.state\\n  }\\n};\\n\")), mdx(\"p\", null, \"\\u4E4B\\u524D\\u6211\\u4E00\\u76F4\\u5F88\\u597D\\u5947\\u540E\\u9762\\u8FD9\\u4E2A\\u662F\\u8981\\u5E72\\u561B\\uFF0C\\u8FD9\\u5C82\\u4E0D\\u662F\\u5F88\\u5947\\u602A\\u7684\\u505A\\u6CD5\\u5417\\uFF1F\\u660E\\u660E\\u9759\\u6001\\u7684\\u8D4B\\u503C\\u5C31\\u80FD\\u521D\\u59CB\\u5316\\uFF0C\\u4E3A\\u4EC0\\u4E48\\u8FD8\\u8981\\u5728 constructor \\u91CC\\u9762\\u8FD0\\u884C\\u65F6\\u521D\\u59CB\\u5316\\u5462\\uFF1F\"), mdx(\"p\", null, \"\\u73B0\\u5728\\u660E\\u767D\\u4E86\\uFF0C\\u56E0\\u4E3A React.Component \\u8FD9\\u4E2A\\u7236\\u7C7B\\u5DF2\\u7ECF\\u5728\\u521D\\u59CB\\u5316\\u7684\\u65F6\\u5019\\u62FF\\u5230\\u4E86 state \\u7684\\u6CDB\\u578B\\uFF0C\\u6240\\u4EE5\\u5982\\u679C\\u76F4\\u63A5\\u4F7F\\u7528  this.state \\u80FD\\u591F\\u770B\\u5230\\u4EE3\\u7801\\u63D0\\u793A\\u3002\"), mdx(\"p\", null, \"\\u65B9\\u6CD5\\u4E00\\u91CC\\u9762\\u7684\\u5C5E\\u6027\\uFF0C\\u8986\\u76D6\\u4E86\\u7236\\u7EC4\\u4EF6\\u7684\\u5C5E\\u6027\\uFF0C\\u5BF9\\u4E8E ts \\u6765\\u8BF4\\uFF0C\\u8FD9\\u4E2A state \\u7684\\u6CDB\\u578B\\u5C31\\u5931\\u6548\\u4E86\\uFF0C\\u5F53\\u7136 setState \\u65B9\\u6CD5\\u7684\\u63D0\\u793A\\u8FD8\\u662F\\u652F\\u6301\\u7684\\uFF0C\\u4F46\\u662F\\u76F4\\u63A5 this.state \\u8BBF\\u95EE\\u5C31\\u53D8\\u6210\\u4E86\\u5F53\\u524D\\u5B50\\u7C7B\\u7684 state \\u7684\\u7C7B\\u578B\\u63A8\\u65AD\\u4E86\\uFF0C\\u9664\\u975E\\u663E\\u5F0F\\u518D\\u6307\\u5B9A\\u7C7B\\u578B\\u3002\"), mdx(\"p\", null, \"\\u800C\\u65B9\\u6CD5\\u4E8C\\u6CA1\\u6709\\u7528\\u65B0\\u5C5E\\u6027\\u8986\\u76D6\\u7236\\u7C7B\\u7684\\u5C5E\\u6027\\uFF0C\\u800C\\u662F\\u5728\\u7236\\u7C7B\\u4E0A\\u8D4B\\u503C\\uFF0C\\u6240\\u4EE5\\u4EE3\\u7801\\u63D0\\u793A\\u4F9D\\u7136\\u7528\\u7684\\u662F\\u7236\\u7C7B\\u7684\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-typescript\"\n  }, \"class DemoCom extends React.Component<{}, TDemoState> {\\n  // \\u4F7F\\u7528\\u8FD9\\u79CD\\u8D4B\\u503C\\u65B9\\u6CD5\\u4F1A\\u8986\\u76D6\\u6389\\u7236\\u7EC4\\u4EF6\\u7684 state \\u7C7B\\u578B\\u58F0\\u660E\\uFF0C\\u4EE3\\u7801\\u63D0\\u793A\\u5C31\\u4F1A\\u53D8\\u6210\\u8FD9\\u4E2A\\u53D8\\u91CF\\n  // state = {\\n  //   statusPool: {}\\n  // }\\n  // \\u4F7F\\u7528\\u8FD9\\u79CD\\u8D4B\\u503C\\u65B9\\u6CD5\\u4F1A\\u8986\\u76D6\\u6389\\u7236\\u7EC4\\u4EF6\\u7684 state \\u7C7B\\u578B\\u58F0\\u660E\\uFF0C\\u4F46\\u662F\\u663E\\u5F0F\\u6307\\u5B9A\\u53C8\\u91CD\\u65B0\\u6307\\u5B9A\\u4E86\\n  // state: IStatusBarState = {\\n  //   statusPool: {}\\n  // }\\n  constructor(){\\n    super();\\n    // \\u4F7F\\u7528\\u8D4B\\u503C\\u6CD5\\uFF0C\\u53EF\\u4EE5\\u907F\\u514D\\u58F0\\u660E\\u8986\\u76D6\\u7236\\u7EC4\\u4EF6\\u7684 state \\u7C7B\\u578B\\u58F0\\u660E\\uFF0C\\u7701\\u53BB\\u4E86\\u663E\\u5F0F\\u6307\\u5B9A\\n    this.state = {\\n      statusPool: {}\\n    }\\n  }\\n  action = () => {\\n    this.state\\n  }\\n};\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"d0d2f052-390f-57da-80c8-a426a86d8810","prev":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/config-files.md","id":"bd5bc321-fdda-5ed6-b08b-71974372143b","parent":{"name":"config-files","sourceInstanceName":"blog"},"excerpt":"想分享的是现代前端复杂的工程化方案，其中需要的各种配置文件，应该没有几个文件没见过吧~\n每次新技术、新需求来临，大呼学不动了的你，看到这些又要披上战甲、拿起键盘冲啊!!! 下面的表格是按照自己几个项目里面用到的一些方案的文件，也算是目前常见的一些了，具体基本上根据文件名就能看出是什么的配置了： name tech desc package.json npm node 包的配置，现在发展为前端通用的项目配置文件 .eslint.json / .eslint.js / .eslintrc…","fields":{"title":"🔰 前端编辑器常见配置文件","slug":"/blog/config-files","description":"项目根目录会有很多配置文件，今天梳理一下有哪些，不是罗列，而是感叹下前端现在的工具和配置的 “艺术”","date":"2019-11-27","redirects":null,"datetime":"2019-11-27 01:17:36","categories":["code"],"series":null,"tags":["前端","整理"],"status":"online"},"frontmatter":{"published":null,"tags":["前端","整理"],"theme":null,"slug":"config-files","date":"2019-11-27 01:17:36"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"config-files\",\n  \"title\": \"🔰 前端编辑器常见配置文件\",\n  \"date\": \"2019-11-27 01:17:36\",\n  \"author\": \"Ubug\",\n  \"description\": \"项目根目录会有很多配置文件，今天梳理一下有哪些，不是罗列，而是感叹下前端现在的工具和配置的 “艺术”\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"前端\", \"整理\"],\n  \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u73B0\\u4EE3\\u524D\\u7AEF\\u590D\\u6742\\u7684\\u5DE5\\u7A0B\\u5316\\u65B9\\u6848\\uFF0C\\u5176\\u4E2D\\u9700\\u8981\\u7684\\u5404\\u79CD\\u914D\\u7F6E\\u6587\\u4EF6\\uFF0C\\u5E94\\u8BE5\\u6CA1\\u6709\\u51E0\\u4E2A\\u6587\\u4EF6\\u6CA1\\u89C1\\u8FC7\\u5427~\\n\\u6BCF\\u6B21\\u65B0\\u6280\\u672F\\u3001\\u65B0\\u9700\\u6C42\\u6765\\u4E34\\uFF0C\\u5927\\u547C\\u5B66\\u4E0D\\u52A8\\u4E86\\u7684\\u4F60\\uFF0C\\u770B\\u5230\\u8FD9\\u4E9B\\u53C8\\u8981\\u62AB\\u4E0A\\u6218\\u7532\\u3001\\u62FF\\u8D77\\u952E\\u76D8\\u51B2\\u554A!!!\")), mdx(\"hr\", null), mdx(\"p\", null, \"\\u4E0B\\u9762\\u7684\\u8868\\u683C\\u662F\\u6309\\u7167\\u81EA\\u5DF1\\u51E0\\u4E2A\\u9879\\u76EE\\u91CC\\u9762\\u7528\\u5230\\u7684\\u4E00\\u4E9B\\u65B9\\u6848\\u7684\\u6587\\u4EF6\\uFF0C\\u4E5F\\u7B97\\u662F\\u76EE\\u524D\\u5E38\\u89C1\\u7684\\u4E00\\u4E9B\\u4E86\\uFF0C\\u5177\\u4F53\\u57FA\\u672C\\u4E0A\\u6839\\u636E\\u6587\\u4EF6\\u540D\\u5C31\\u80FD\\u770B\\u51FA\\u662F\\u4EC0\\u4E48\\u7684\\u914D\\u7F6E\\u4E86\\uFF1A\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"name\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"tech\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"desc\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"package.json\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"npm\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"node \\u5305\\u7684\\u914D\\u7F6E\\uFF0C\\u73B0\\u5728\\u53D1\\u5C55\\u4E3A\\u524D\\u7AEF\\u901A\\u7528\\u7684\\u9879\\u76EE\\u914D\\u7F6E\\u6587\\u4EF6\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".eslint.json / .eslint.js / .eslintrc / .eslintrc.js\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ESlint\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BED\\u6CD5\\u3001\\u95EE\\u9898\\u3001\\u98CE\\u683C\\u68C0\\u67E5\\u548C\\u81EA\\u52A8\\u4FEE\\u590D\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".lintstagedrc / lint-staged.config.js\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"lint-staged\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u914D\\u5408 Git \\u6765\\u8FC7\\u6EE4\\u4FEE\\u6539\\u7684\\u6587\\u4EF6\\uFF0C\\u4EE5\\u4FBF\\u505A\\u63D0\\u4EA4\\u524D\\u68C0\\u67E5\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".huskyrc\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"husky\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5B9E\\u73B0 git hook \\u65B9\\u4FBF\\u5728 git \\u7684\\u5904\\u7406\\u9636\\u6BB5\\u5904\\u7406\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".eslintignore\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ESlint\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ESlint \\u5FFD\\u7565\\u68C0\\u67E5\\u7684\\u6587\\u4EF6\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".perttierrc / .prettier.config.js / .prettierignore\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"prettier\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4EE3\\u7801\\u98CE\\u683C\\u5316\\u5DE5\\u5177\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".babelrc\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Babel\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8BED\\u6CD5\\u7F16\\u8BD1\\u5DE5\\u5177\\uFF0C\\u65B0\\u8BED\\u6CD5\\u7F16\\u8BD1\\u4E3A\\u6D4F\\u89C8\\u5668\\u517C\\u5BB9\\u7248\\u672C\\uFF0C\\u524D\\u7AEF\\u53D1\\u5C55\\u7684\\u57FA\\u77F3\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".browserslistrc\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"browserslist\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6307\\u5B9A\\u76EE\\u6807\\u6D4F\\u89C8\\u5668\\uFF0C\\u5F88\\u591A\\u63D2\\u4EF6\\u6BD4\\u5982 babel \\u6839\\u636E\\u8FD9\\u4E2A\\u914D\\u7F6E\\u6765\\u786E\\u8BA4\\u7F16\\u8BD1\\u76EE\\u6807\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".env / .envrc / .env.development / .env.production / .env.production.local\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u73AF\\u5883\\u53D8\\u91CF\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E00\\u822C\\u901A\\u7528\\u7684\\u73AF\\u5883\\u53D8\\u91CF\\u6587\\u4EF6\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".gitignore\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Git\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Git \\u5FFD\\u7565\\u6587\\u4EF6\\u5217\\u8868\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".nvmrc / .node-version\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"avn avn-nvm\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"avn \\u4F7F\\u7528 nvm \\u81EA\\u52A8\\u5207\\u6362\\u9879\\u76EE\\u4E0Bnode \\u7248\\u672C\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"jest.config.js\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"jest\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u4E00\\u4E2A\\u524D\\u7AEF\\u6D4B\\u8BD5\\u652F\\u6301\\u5E93\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"tsconfig.json\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"TypeScript\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"TS \\u8BED\\u6CD5\\u652F\\u6301\\u7684\\u914D\\u7F6E\\u6587\\u4EF6\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"yarn.lock\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Yarn\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Yarn \\u7684\\u4F9D\\u8D56\\u6587\\u4EF6\\u9501\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"package-lock.json\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"NPM\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"NPM \\u7684\\u4F9D\\u8D56\\u6587\\u4EF6\\u9501\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".vscode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"VSCode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7F16\\u8F91\\u5668\\u5DE5\\u4F5C\\u533A\\u914D\\u7F6E\\u6587\\u4EF6\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"lerna.json\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Lerna\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Lerna \\u524D\\u7AEF\\u5305\\u9879\\u76EE\\u5FAE\\u67B6\\u6784\\u914D\\u7F6E\\u6587\\u4EF6\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"typings.d.ts\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"TypeScript\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"TS \\u5168\\u5C40\\u58F0\\u660E\\u6587\\u4EF6\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".gitlab-ci.yml\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Gitlab\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Gitlab \\u6301\\u7EED\\u7EE7\\u627F\\u670D\\u52A1\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"AUTHORS / README.md / HISTORY.md / CONTRIBUTING.md / COPYING / LICENCE / CHANGELOG.md\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Docs\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5E38\\u89C1\\u7684\\u9879\\u76EE\\u6587\\u6863\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".travis.yml\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"travis\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Travis \\u6301\\u7EED\\u7EE7\\u627F\\u914D\\u7F6E\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \".npmignore\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"NPM\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6253\\u5305\\u5FFD\\u7565\\u6587\\u4EF6\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"rollup.config.js\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"rollup\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"rollup \\u914D\\u7F6E\\u6587\\u4EF6\\u5165\\u53E3\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"webpack.config.js\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"webpack\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"webpack \\u914D\\u7F6E\\u6587\\u4EF6\\u5165\\u53E3\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"components.json\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"shadcn\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"tailwind.config.js\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"tailwind\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"tailwind \\u914D\\u7F6E\\u6587\\u4EF6\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"next.config.js\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"next\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"next \\u914D\\u7F6E\\u6587\\u4EF6\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"postcss.config.js\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"postcss\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"postcss \\u914D\\u7F6E\\u6587\\u4EF6\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"tailwind.config.js\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"tailwind\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"tailwind \\u914D\\u7F6E\\u6587\\u4EF6\")))), mdx(\"p\", null, \"\\u5E38\\u89C1\\u6587\\u4EF6\\u5939\\uFF0C\\u8FD9\\u4E2A\\u4E0D\\u540C\\u7684\\u9879\\u76EE\\u7ED3\\u6784\\u7528\\u5904\\u4E0D\\u540C\\uFF0C\\u4F46\\u662F\\u5927\\u90E8\\u5206\\u6587\\u4EF6\\u5939\\u540D\\u5B89\\u6392\\u76F8\\u4F3C\\uFF1A\"), mdx(\"table\", null, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"name\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"usage\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"node_modules\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"npm \\u4F9D\\u8D56\\u6587\\u4EF6\\u5939\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"src\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6E90\\u7801\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"config\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9879\\u76EE\\u811A\\u672C\\u914D\\u7F6E\\u6587\\u4EF6\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"build\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6784\\u5EFA\\u811A\\u672C\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"dist\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5BFC\\u51FA\\u76EE\\u5F55\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"vendor\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7B2C\\u4E09\\u65B9\\u5E93\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"src/pages\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9875\\u9762\\u5206\\u5272\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"src/components\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7EC4\\u4EF6\\u6587\\u4EF6\\u5939\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"src/static\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u9759\\u6001\\u6587\\u4EF6\\u5939\\uFF0C\\u4E0D\\u7F16\\u8BD1\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"src/assets\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u8D44\\u6E90\\u6587\\u4EF6\\u5939\\uFF0C\\u9700\\u7F16\\u8BD1\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"src/utils\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u652F\\u6301\\u5DE5\\u5177\\u5E93\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"src/apis\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7F51\\u7EDC\\u8BF7\\u6C42\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"src/models\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u6570\\u636E\\u6A21\\u578B\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"libs\\u3001plugins\\u3001views\\u3001styles\\u3001theme\\u3001layout\\u3001imgs\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u5176\\u4ED6\\u6587\\u4EF6\\u540D\")))), mdx(\"p\", null, \"\\u5217\\u51FA\\u6765\\u7684\\u8FD9\\u4E9B\\u53EA\\u662F\\u4E00\\u90E8\\u5206\\uFF0C\\u6240\\u4EE5\\u80FD\\u770B\\u51FA\\u6765\\u524D\\u7AEF\\u754C\\u76EE\\u524D\\u7684\\u5DE5\\u5177\\u652F\\u6301\\u751F\\u6001\\u591A\\u4E48\\u7684\\u4E30\\u5BCC\\uFF0C\\u8D8A\\u6765\\u8D8A\\u590D\\u6742\\u7684\\u524D\\u7AEF\\u914D\\u7F6E\\u4E5F\\u6B63\\u8BF4\\u660E\\u4E86\\u5149\\u521D\\u59CB\\u5316\\u4E00\\u4E2A\\u9879\\u76EE\\u5C31\\u9700\\u8981\\u4E0D\\u5C11\\u7CBE\\u529B\\u3002\"), mdx(\"p\", null, \"\\u672F\\u4E1A\\u6709\\u4E13\\u653B\\uFF0C\\u9879\\u76EE\\u4E2D\\u6BCF\\u4E2A\\u9700\\u6C42\\uFF0C\\u90FD\\u80FD\\u5F15\\u5165\\u4E00\\u4E2A\\u5DE5\\u5177\\u652F\\u6301\\uFF0C\\u76F8\\u5173\\u7684\\u914D\\u7F6E\\u548C\\u7528\\u6CD5\\u5B98\\u7F51\\u548C\\u793E\\u533A\\u90FD\\u6709\\u8BE6\\u7EC6\\u7684\\u6587\\u6863\\uFF0C\\u751A\\u81F3\\u7F16\\u8F91\\u5668\\u652F\\u6301 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"http://schemastore.org/json/\"\n  }, \"json schema\"), \" \\u4E5F\\u80FD\\u63D0\\u4F9B\\u4E00\\u5B9A\\u7A0B\\u5EA6\\u7684\\u8BED\\u6CD5\\u63D0\\u793A\\uFF0C\\u6240\\u4EE5\\u8FD9\\u4E5F\\u662F\\u8BF4\\u660E\\u9700\\u6C42\\u9010\\u6E10\\u7EC6\\u5316\\u7684\\u76EE\\u524D\\u524D\\u7AEF\\u751F\\u6001\\u7279\\u70B9\\u3002\"), mdx(\"p\", null, \"\\u6BCF\\u6B21\\u65B0\\u6280\\u672F\\u3001\\u65B0\\u9700\\u6C42\\u6765\\u4E34\\uFF0C\\u5927\\u547C\\u5B66\\u4E0D\\u52A8\\u4E86\\u7684\\u4F60\\uFF0C\\u770B\\u5230\\u8FD9\\u4E9B\\u53C8\\u8981\\u62AB\\u4E0A\\u6218\\u7532\\u3001\\u62FF\\u8D77\\u952E\\u76D8\\u51B2\\u554A\", mdx(\"del\", {\n    parentName: \"p\"\n  })));\n}\n;\nMDXContent.isMDXComponent = true;"},"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/eslint.md","id":"35cce3eb-69c1-5c43-b940-6dd9198359ee","parent":{"name":"eslint","sourceInstanceName":"blog"},"excerpt":"想分享的是让你知道 ESLint 的简单背景和用法，以及知道 ESLint 怎么在项目中发挥作用的。 1. ESlint 是个什么 顾名思义  ECMAScript Linter  就是一个 ES 规范的检查器，负责检查代码语法/风格/错误。 在天地初开之时，JS 依靠语法宽松、动态运行的特点更容易低门槛实现业务获得青睐，但也是因此很多语法和逻辑错误无法在静态检查阶段被发现，于是 JSLint 语法检查器出世，能够满足基本的代码静态检查需求，但是扩展性差几乎不可配置，后来在此基础上又 fork…","fields":{"title":"🚑 Eslint 周边","slug":"/blog/eslint","description":"ESlint 一直在用，前端大杀器，团队协作最基础的一个支撑，简单写点记录下温故知新的东西.","date":"2019-11-18","redirects":null,"datetime":"2019-11-18 23:31:36","categories":["code"],"series":null,"tags":["ESLint","前端","最佳实践"],"status":"online"},"frontmatter":{"published":null,"tags":["ESLint","前端","最佳实践"],"theme":null,"slug":"eslint","date":"2019-11-18 23:31:36"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"eslint\",\n  \"title\": \"🚑 Eslint 周边\",\n  \"date\": \"2019-11-18 23:31:36\",\n  \"author\": \"Ubug\",\n  \"description\": \"ESlint 一直在用，前端大杀器，团队协作最基础的一个支撑，简单写点记录下温故知新的东西.\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"ESLint\", \"前端\", \"最佳实践\"],\n  \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"\\u60F3\\u5206\\u4EAB\\u7684\\u662F\\u8BA9\\u4F60\\u77E5\\u9053 ESLint \\u7684\\u7B80\\u5355\\u80CC\\u666F\\u548C\\u7528\\u6CD5\\uFF0C\\u4EE5\\u53CA\\u77E5\\u9053 ESLint \\u600E\\u4E48\\u5728\\u9879\\u76EE\\u4E2D\\u53D1\\u6325\\u4F5C\\u7528\\u7684\\u3002\")), mdx(\"hr\", null), mdx(\"h2\", null, \"1. ESlint \\u662F\\u4E2A\\u4EC0\\u4E48\"), mdx(\"p\", null, \"\\u987E\\u540D\\u601D\\u4E49 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ECMAScript Linter\"), \" \\u5C31\\u662F\\u4E00\\u4E2A ES \\u89C4\\u8303\\u7684\\u68C0\\u67E5\\u5668\\uFF0C\\u8D1F\\u8D23\\u68C0\\u67E5\\u4EE3\\u7801\\u8BED\\u6CD5/\\u98CE\\u683C/\\u9519\\u8BEF\\u3002\"), mdx(\"p\", null, \"\\u5728\\u5929\\u5730\\u521D\\u5F00\\u4E4B\\u65F6\\uFF0CJS \\u4F9D\\u9760\\u8BED\\u6CD5\\u5BBD\\u677E\\u3001\\u52A8\\u6001\\u8FD0\\u884C\\u7684\\u7279\\u70B9\\u66F4\\u5BB9\\u6613\\u4F4E\\u95E8\\u69DB\\u5B9E\\u73B0\\u4E1A\\u52A1\\u83B7\\u5F97\\u9752\\u7750\\uFF0C\\u4F46\\u4E5F\\u662F\\u56E0\\u6B64\\u5F88\\u591A\\u8BED\\u6CD5\\u548C\\u903B\\u8F91\\u9519\\u8BEF\\u65E0\\u6CD5\\u5728\\u9759\\u6001\\u68C0\\u67E5\\u9636\\u6BB5\\u88AB\\u53D1\\u73B0\\uFF0C\\u4E8E\\u662F JSLint \\u8BED\\u6CD5\\u68C0\\u67E5\\u5668\\u51FA\\u4E16\\uFF0C\\u80FD\\u591F\\u6EE1\\u8DB3\\u57FA\\u672C\\u7684\\u4EE3\\u7801\\u9759\\u6001\\u68C0\\u67E5\\u9700\\u6C42\\uFF0C\\u4F46\\u662F\\u6269\\u5C55\\u6027\\u5DEE\\u51E0\\u4E4E\\u4E0D\\u53EF\\u914D\\u7F6E\\uFF0C\\u540E\\u6765\\u5728\\u6B64\\u57FA\\u7840\\u4E0A\\u53C8 fork \\u51FA\\u4E86 JSHint\\uFF0C\\u5F88\\u957F\\u65F6\\u95F4\\u5185\\u8FD9\\u4E24\\u4E2A\\u5DE5\\u5177\\u548C\\u76F8\\u5173\\u751F\\u6001\\u652F\\u6301\\u4E86\\u6700\\u5F00\\u59CB\\u7684\\u4EE3\\u7801\\u68C0\\u67E5\\u9700\\u6C42\\uFF0C\\u6BD5\\u7ADF\\u5F53\\u4E8B\\u7684 ES \\u7248\\u672C\\u7A33\\u5B9A\\u4E0D\\u53D8\\u4E86\\u5F88\\u957F\\u4E00\\u6BB5\\u65F6\\u95F4\\u3002\\u968F\\u7740\\u65F6\\u4EE3\\u7684\\u53D1\\u5C55\\uFF0C\\u66F4\\u52A0\\u597D\\u7528\\u5BB9\\u6613\\u914D\\u7F6E\\u7684 eslint \\u91C7\\u7528 ast \\u7B49\\u529F\\u80FD\\u5728 es5 \\u7684\\u65F6\\u4EE3\\u5927\\u653E\\u5F02\\u5F69\\uFF0C\\u6BD4\\u5982 babel-eslint\\uFF0C\\u4E00\\u4E2A\\u63D2\\u4EF6\\u5C31\\u652F\\u6301\\u4E86\\u66F4\\u9AD8\\u7EA7\\u7684\\u8BED\\u6CD5\\u3002\"), mdx(\"p\", null, \"\\u6700\\u5F00\\u59CB\\u7684\\u9700\\u6C42\\u662F\\u5728\\u4EE3\\u7801\\u4E0A\\u7EBF\\u4E4B\\u524D\\u68C0\\u67E5\\u51FA\\u4EE3\\u7801\\u4E2D\\u7684\\u8BED\\u6CD5\\u9519\\u8BEF\\u95EE\\u9898\\u3001\\u7F16\\u7801\\u95EE\\u9898\\u8FD8\\u6709\\u4E00\\u4E9B\\u4EE3\\u7801\\u98CE\\u683C\\u95EE\\u9898\\u3002\\u540E\\u9762\\u6709\\u7F16\\u8F91\\u5668\\u7684\\u652F\\u6301\\u5C31\\u53EF\\u4EE5\\u5728\\u7F16\\u7801\\u7684\\u8FC7\\u7A0B\\u4E2D\\u5B9E\\u65F6\\u7684\\u63D0\\u793A\\u8BED\\u6CD5\\u95EE\\u9898\\u3002\\u518D\\u540E\\u6765\\u53EF\\u4EE5\\u5728\\u56E2\\u961F\\u534F\\u4F5C\\u65F6\\u63D0\\u524D\\u5F3A\\u5236\\u68C0\\u67E5\\u9519\\u8BEF\\u548C\\u98CE\\u683C\\u3002\\u5230\\u73B0\\u5728\\u65E0\\u8BBA\\u662F\\u4E2A\\u4EBA\\u8FD8\\u662F\\u56E2\\u961F\\u4F5C\\u4E3A\\u5FC5\\u9009\\u529F\\u80FD\\u96C6\\u6210\\u5728\\u9879\\u76EE\\u4E2D\\u3002\"), mdx(\"p\", null, \"ESlint \\u5F97\\u4EE5\\u6D41\\u884C\\u7684\\u5F88\\u91CD\\u8981\\u539F\\u56E0\\u662F\\u7075\\u6D3B\\u7684\\u53EF\\u914D\\u7F6E\\u9879\\uFF0C\\u5305\\u62EC plugins \\u6269\\u5C55\\u3001\\u7EE7\\u627F\\u3001\\u89E3\\u6790\\u5668\\u3001\\u548C\\u7EC6\\u81F4\\u53EF\\u914D\\u7F6E\\u7684\\u89C4\\u5219\\u7B49\\u5F3A\\u5927\\u529F\\u80FD\\u3002\"), mdx(\"h2\", null, \"2. \\u7B80\\u5355\\u4F7F\\u7528\"), mdx(\"p\", null, \"\\u5728\\u5DE5\\u4F5C\\u6587\\u4EF6\\u5939\\u4E0B\\u6267\\u884C\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-zsh\"\n  }, \"yarn add eslint --dev\\n\")), mdx(\"p\", null, \"\\u521D\\u59CB\\u5316\\u4E00\\u4E2A\\u6700\\u7B80\\u5355\\u7684\\u914D\\u7F6E\\u6587\\u4EF6\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-zsh\"\n  }, \"npx eslint --init\\n\")), mdx(\"p\", null, \"\\u6B64\\u5904\\u5C31\\u4F1A\\u95EE\\u662F\\u8981 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"check syntax, find problems, and enforce code style\"), \" \\u7684\\u4E09\\u4E2A\\u529F\\u80FD\\uFF0C\\u8FD9\\u4E2A\\u4E5F\\u662F\\u6574\\u4E2A ESLint \\u7684\\u5168\\u90E8\\u76EE\\u7684\\u3002\"), mdx(\"p\", null, \"\\u518D\\u65B0\\u5EFA\\u4E00\\u4E2A\\u793A\\u4F8B\\u6587\\u4EF6\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"// demo.js\\nfunction add(a, b) {\\n  return a + b;\\n}\\n\\nconsole.log(add(1, 1));\\n\")), mdx(\"p\", null, \"\\u8FD0\\u884C\\u68C0\\u67E5\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-zsh\"\n  }, \"eslint demo.js\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-log\"\n  }, \"/workspace/demo.js\\n\\n/Users/ubug/codes/kitu-demos/eslint/demo.js\\n  2:1   error  Expected indentation of 4 spaces but found 2  indent\\n  2:15  error  Extra semicolon                               semi\\n  5:1   error  Unexpected console statement                  no-console\\n  5:23  error  Extra semicolon                               semi\\n\\n\\u2716 4 problems (4 errors, 0 warnings)\\n  3 errors and 0 warnings potentially fixable with the `--fix` option.\\n\")), mdx(\"p\", null, \"\\u8BED\\u6CD5\\u6CA1\\u95EE\\u9898\\uFF0C\\u4F46\\u662F\\u6709 4 \\u4E2A\\u9519\\u8BEF\\uFF0C3\\u4E2A\\u53EF\\u4EE5\\u81EA\\u52A8\\u4FEE\\u590D\\u3002\\u5206\\u522B\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"indent\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"semi\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"no-console\"), \" \\u4E09\\u4E2A\\u9519\\u8BEF\\uFF0C\\u6309\\u7167\\u8BF4\\u660E\\u6765\\u770B\\u5176\\u4E2D \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"indent\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"semi\"), \" \\u662F\\u6837\\u5F0F\\u95EE\\u9898\\uFF0C\\u800C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"no-console\"), \" \\u662F\\u4E25\\u683C\\u7684\\u4EE3\\u7801\\u95EE\\u9898\\u3002\"), mdx(\"h2\", null, \"3. ESlint \\u5E38\\u89C1\\u65B9\\u6848\"), mdx(\"p\", null, \"\\u56E2\\u961F\\u534F\\u4F5C\\u5DE5\\u4F5C\\u4E2D\\uFF0C\\u4EE3\\u7801\\u89C4\\u8303\\u8D8A\\u6765\\u8D8A\\u4E3E\\u8DB3\\u8F7B\\u91CD\\uFF0C\\u4FDD\\u6301\\u540C\\u6837\\u7684\\u4EE3\\u7801\\u98CE\\u683C\\uFF0C\\u964D\\u4F4E\\u57FA\\u672C\\u9519\\u8BEF\\u7684\\u51FA\\u73B0\\u7B49\\u90FD\\u662F\\u534F\\u4F5C\\u7684\\u57FA\\u7840\\uFF0C\\u975E\\u5E38\\u7684\\u4F9D\\u8D56\\u7C7B\\u4F3C ESlint \\u8FD9\\u6837\\u7684\\u5DE5\\u5177\\u5B8C\\u6210\\u8FD9\\u4E9B\\u4E2A\\u76EE\\u6807\\uFF0C\\u6240\\u4EE5\\u5728\\u56E2\\u961F\\u4E2D\\u4F7F\\u7528 ESlint \\u7684\\u65B9\\u6848\\u8FD8\\u662F\\u5F88\\u91CD\\u8981\\u7684\\uFF0C\\u4E0D\\u8FC7\\u56E2\\u961F\\u7684\\u4F7F\\u7528\\u5B9A\\u5236\\u548C\\u4E2A\\u4EBA\\u7684\\u5B9A\\u5236\\u6DF1\\u5EA6\\u4E0D\\u540C\\uFF0C\\u56E2\\u961F\\u7684\\u914D\\u7F6E\\u66F4\\u503E\\u5411\\u4E8E\\u4E25\\u683C\\uFF0C\\u4E2A\\u4EBA\\u7684\\u66F4\\u4E60\\u60EF\\u7A0D\\u7A0D\\u5BBD\\u677E\\uFF0C\\u52A0\\u4E0A\\u81EA\\u5DF1\\u7684\\u504F\\u597D\\u3002\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"npx eslint --init\"), \" \\u5728\\u7B80\\u5355\\u7684\\u4E2A\\u4EBA\\u9879\\u76EE\\u4E2D\\u8DB3\\u591F\\u4F7F\\u7528\\u4E86\\uFF0C\\u4F46\\u662F\\u5BF9\\u4E8E\\u60F3\\u6DF1\\u5165\\u5B9A\\u5236\\u7684\\u9700\\u6C42\\uFF0C\\u89C4\\u5219\\u548C\\u63D2\\u4EF6\\u751F\\u6001\\u975E\\u5E38\\u4E30\\u5BCC\\u7684\\u4ECA\\u5929\\uFF0C\\u8FD9\\u6837\\u7684\\u5B9A\\u5236\\u5F88\\u8017\\u8D39\\u7CBE\\u529B\\uFF0C\\u597D\\u5728\\u4E1A\\u5185\\u5DF2\\u7ECF\\u5B8C\\u6210\\u4E86\\u6BD4\\u8F83\\u6210\\u719F\\u7684\\u9884\\u8BBE\\u65B9\\u6848\\uFF0C\\u6BD4\\u5982\\u6BD4\\u8F83\\u65E9\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Airbnb\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Google\"), \" \\u5B9A\\u5236\\u7684\\u4E00\\u5957\\u89C4\\u8303\\uFF0C\\u5305\\u62EC ESlint \\u63A8\\u8350\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Standard\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Recommanded\"), \" \\u7B49\\u3002\\u9664\\u6B64\\u4E4B\\u5916\\u8FD8\\u6709\\u5176\\u4ED6\\u5F88\\u591A\\u6846\\u67B6\\u3001\\u516C\\u53F8\\u4E5F\\u90FD\\u6709\\u5B9A\\u5236\\u7684\\u89C4\\u8303\\uFF0C\\u7528\\u6CD5\\u57FA\\u672C\\u5927\\u540C\\u5C0F\\u5F02\\uFF0C\\u63A8\\u8350\\u4E2A\\u4EBA\\u6839\\u636E\\u559C\\u597D\\u505A\\u4E00\\u4E2A\\u65B9\\u6848\\u53EF\\u4EE5\\u65B9\\u4FBF\\u5F88\\u591A\\u81EA\\u5DF1\\u7684\\u5C0F\\u9879\\u76EE\\u3002\"), mdx(\"p\", null, \"\\u5E38\\u89C1\\u7684\\u662F\\u4F7F\\u7528\\u8F83\\u5F3A\\u68C0\\u67E5\\u7684 airbnb \\u6216\\u8005 standard \\u8FDB\\u884C\\u8BED\\u6CD5\\u68C0\\u67E5\\uFF0C\\u642D\\u914D Prettier \\u9650\\u5236\\u4E00\\u4E9B\\u56E2\\u961F\\u7279\\u6709\\u7684\\u4E60\\u60EF\\u9650\\u5236\\uFF0C\\u7136\\u540E\\u914D\\u5408 Husky \\u6216\\u8005 pre-commit \\u52A0\\u4E0A lint-staged \\u5B9E\\u73B0\\u63D0\\u4EA4\\u524D\\u5F3A\\u5236\\u68C0\\u67E5\\u3002\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"standard\"), \" \\u4F8B\\u5B50\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"yarn add --dev eslint-config-standard eslint-plugin-standard\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"module.exports = {\\n  \\\"extends\\\": [\\\"standard\\\"],\\n  \\\"plugins\\\": [\\\"standard\\\"],\\n}\\n\")), mdx(\"h2\", null, \"4. Prettier\"), mdx(\"p\", null, \"\\u4E0A\\u9762\\u8BF4\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Airbnb\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Standard\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Recommanded\"), \" \\u7B49\\u662F\\u6BD4\\u8F83\\u5B8C\\u6574\\u7684\\u8BED\\u6CD5\\u68C0\\u67E5\\uFF0C\\u4EE3\\u7801\\u89C4\\u8303\\uFF0C\\u683C\\u5F0F\\u5316\\uFF0C\\u4F46\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Prettier\"), \" \\u662F\\u6BD4\\u8F83\\u7279\\u6B8A\\u7684\\u4E00\\u4E2A\\uFF0C\\u5B83\\u53EA\\u8D1F\\u8D23\\u4EE3\\u7801\\u7684\\u683C\\u5F0F\\u5316\\u3002\"), mdx(\"p\", null, \"\\u4E00\\u65B9\\u9762 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Prettier\"), \" \\u6709\\u72EC\\u7ACB\\u7684\\u5305\\uFF0C\\u53EF\\u4EE5\\u72EC\\u7ACB\\u6267\\u884C\\u4EE3\\u7801\\u7684\\u683C\\u5F0F\\u5316\\uFF0C\\u4E0D\\u4F9D\\u8D56 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ESLint\"), \"\\u3002\\u53E6\\u4E00\\u65B9\\u9762\\u53EF\\u4EE5\\u4EE5\\u63D2\\u4EF6\\u7684\\u5F62\\u5F0F\\u5728 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ESlint\"), \" \\u4E2D\\u5B58\\u5728\\uFF0C\\u4EE3\\u66FF \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ESlint\"), \" \\u4E2D\\u7684\\u683C\\u5F0F\\u5316\\u7684\\u529F\\u80FD\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5 Prettier \\u662F\\u4E00\\u4E2A\\u53EA\\u8D1F\\u8D23\\u4EE3\\u7801\\u683C\\u5F0F\\u5316\\u7684\\u5DE5\\u5177\\uFF0C\\u8BED\\u6CD5\\u914D\\u7F6E\\u76F8\\u5173\\u7684\\u89C4\\u5219\\u4E0D\\u4F1A\\u6D89\\u53CA\\uFF0C\\u6240\\u4EE5\\u4E5F\\u53EF\\u4EE5\\u548C Airbnb \\u4E00\\u8D77\\u4F7F\\u7528\\u3002\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ESLint\"), \" \\u7E41\\u591A\\u7684\\u89C4\\u5219\\uFF0C\\u521D\\u59CB\\u5316\\u7684\\u65F6\\u5019\\u4E5F\\u4F1A\\u63D0\\u793A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"To check syntax, find problems, and enforce code style\"), \"\\uFF0C\\u6240\\u4EE5\\u529F\\u80FD\\u5206\\u4E3A \\u8BED\\u6CD5\\u68C0\\u67E5(a=;)\\u3001\\u95EE\\u9898\\u53D1\\u73B0(\\u4E0D\\u5141\\u8BB8\\u4F7F\\u7528 console\\uFF0C\\u4F46\\u662F\\u68C0\\u6D4B\\u5230\\u4E86 console) \\u548C \\u4EE3\\u7801\\u683C\\u5F0F\\u5316(\\u7A7A\\u683C\\u7F29\\u8FDB\\u6570) \\u4E09\\u4E2A\\u529F\\u80FD\\u3002\\u201C\\u4EE3\\u7801\\u683C\\u5F0F\\u5316\\u201D \\u5C31\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Prettier\"), \" \\u8981\\u8986\\u76D6\\u548C\\u62D3\\u5C55\\u7684\\u3002\"), mdx(\"p\", null, \"\\u7981\\u7528prettier\\u51B2\\u7A81\\u7684\\u89C4\\u5219\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"yarn add --dev eslint-config-prettier\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"module.exports = {\\n  \\\"extends\\\": [\\\"prettier\\\"]\\n}\\n\")), mdx(\"p\", null, \"\\u7528 eslint \\u63A5\\u7BA1 prettier \\u7684\\u8FD0\\u884C\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"yarn add --dev eslint-plugin-prettier\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"module.exports = {\\n  \\\"extends\\\": [\\\"prettier\\\"],\\n  \\\"plugins\\\": [\\\"prettier\\\"],\\n}\\n\")), mdx(\"h2\", null, \"5. typescript\"), mdx(\"p\", null, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TypeScript\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ECMAScript\"), \" \\u76F8\\u6BD4\\u53EF\\u4EE5\\u7B97\\u662F\\u4E0D\\u540C\\u7684\\u8BED\\u8A00\\u4E86\\uFF0C\\u89E3\\u6790\\u662F\\u4E0D\\u540C\\u7684\\uFF0C\\u521A\\u5F00\\u59CB \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Typescript\"), \" \\u4F7F\\u7528\\u81EA\\u5DF1\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tslint\"), \" \\u6765\\u5B9E\\u73B0\\u8FD9\\u4E2A\\u529F\\u80FD\\uFF0C\\u4F46\\u662F\\u968F\\u7740\\u53D1\\u5C55\\u548C\\u5B9A\\u5236\\u5316\\u8981\\u6C42\\u8D8A\\u6765\\u8D8A\\u9AD8\\uFF0C\\u76EE\\u524D\\u5B98\\u65B9\\u5DF2\\u7ECF\\u653E\\u5F03\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"tslint\"), \"\\uFF0C\\u8F6C\\u800C\\u5B9E\\u73B0\\u76F8\\u5173\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ESlint\"), \" \\u751F\\u6001\\uFF0C\\u8FD9\\u5176\\u5B9E\\u662F\\u66F4\\u597D\\u7684\\u9009\\u62E9\\u3002\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"yarn add --dev @typescript-eslint\\n\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"module.exports = {\\n    \\\"parser\\\": \\\"@typescript-eslint/parser\\\",\\n    \\\"plugins\\\": [\\n        \\\"@typescript-eslint\\\"\\n    ],\\n};\\n\")), mdx(\"h2\", null, \"6. \\u7F16\\u8F91\\u5668\\u63D2\\u4EF6\"), mdx(\"p\", null, \"\\u5982\\u679C\\u4F60\\u5728\\u9879\\u76EE\\u6839\\u76EE\\u5F55\\u4E0B\\u9762\\u521B\\u5EFA\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".eslintrc\"), \"\\uFF0C\\u7136\\u540E\\u5B89\\u88C5 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"eslint\"), \" \\u7684\\u63D2\\u4EF6\\uFF0C\\u7F16\\u8F91\\u5668\\u4F1A\\u63D0\\u4F9B\\u8BED\\u6CD5\\u3001\\u9519\\u8BEF\\u548C\\u683C\\u5F0F\\u5316\\u7684\\u63D0\\u793A\\uFF0C\\u4ECE\\u8FD9\\u4E2A\\u7528\\u5904\\u6765\\u8BF4\\u4E5F\\u4E0D\\u7528\\u5B89\\u88C5\\u4F9D\\u8D56\\u4E86\\uFF1F\"), mdx(\"p\", null, \"\\u5B89\\u88C5\\u4F9D\\u8D56\\u4E0E\\u7F16\\u8F91\\u5668\\u63D2\\u4EF6\\u7684\\u533A\\u522B\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5B89\\u88C5\\u7F16\\u8F91\\u5668\\u63D2\\u4EF6\\uFF0C\\u80FD\\u6839\\u636E\\u9879\\u76EE\\u914D\\u7F6E\\u6587\\u4EF6\\uFF0C\\u5B9E\\u73B0\\u7F16\\u8F91\\u5668\\u5B9E\\u65F6\\u7684\\u4EE3\\u7801\\u68C0\\u67E5\\u3001\\u98CE\\u683C\\u683C\\u5F0F\\u5316\\u7B49\\u529F\\u80FD\\uFF0C\\u4F46\\u662F\\u53BB\\u9664\\u63D2\\u4EF6\\u6216\\u8005\\u66F4\\u6362\\u7F16\\u8F91\\u5668\\u8FD9\\u4E9B\\u529F\\u80FD\\u5C31\\u4E22\\u5931\\u4E86\\uFF0C\\u6BD5\\u7ADF\\u662F\\u63D2\\u4EF6\\u63D0\\u4F9B\\u7684\\u529F\\u80FD\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5B89\\u88C5\\u4F9D\\u8D56\\uFF0C\\u6839\\u636E npm \\u811A\\u672C\\u8BBE\\u7F6E\\uFF0C\\u53EF\\u4EE5\\u7528 githook \\u6216\\u8005\\u624B\\u52A8\\u8FD0\\u884C\\u7684\\u65B9\\u5F0F\\u5728\\u547D\\u4EE4\\u884C\\u8FD0\\u884C\\uFF0C\\u4E0D\\u4F9D\\u6258\\u4E8E\\u7F16\\u8F91\\u5668\\uFF0C\\u4F46\\u662F\\u5E76\\u4E0D\\u80FD\\u63D0\\u4F9B\\u7F16\\u8F91\\u5668\\u754C\\u9762\\u4E0A\\u7684\\u63D0\\u793A\\u3002\")), mdx(\"h2\", null, \"7. \\u914D\\u7F6E\"), mdx(\"p\", null, \"ESLint \\u914D\\u7F6E\\u6587\\u4EF6\\u751F\\u6548\\u4F18\\u5148\\u7EA7\\u4E3A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json\")), mdx(\"p\", null, \"\\u5177\\u4F53\\u7528\\u6CD5\\u4E0D\\u804A\\uFF0C\\u4E00\\u7BC7\\u5B98\\u65B9\\u6587\\u6863\\u5373\\u53EF\\u5B8C\\u6574\\u8BF4\\u660E\\u5168\\u90E8\\u7684\\u914D\\u7F6E\\uFF1A \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://eslint.org/docs/user-guide/configuring\"\n  }, \"Configuring ESLint\"), \"\\uFF0C\\u6216\\u8005 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://cn.eslint.org/docs/user-guide/configuring\"\n  }, \"\\u4E2D\\u6587\\u7F51\\u7AD9\"), \" \\u3002\"), mdx(\"p\", null, \"\\u4E00\\u4E2A\\u5E38\\u89C1\\u7684\\u914D\\u7F6E\\u6587\\u4EF6\\u5982\\u4E0B\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-json\"\n  }, \"{\\n  \\\"extends\\\": \\\"eslint:recommended\\\",\\n  \\\"parserOptions\\\": {\\n    \\\"ecmaVersion\\\": 6,\\n    \\\"sourceType\\\": \\\"module\\\",\\n    \\\"ecmaFeatures\\\": {\\n      \\\"jsx\\\": true\\n    }\\n  },\\n  \\\"env\\\": {\\n      \\\"browser\\\": true,\\n      \\\"node\\\": true\\n  },\\n  \\\"plugins\\\": [\\n    \\\"import\\\",\\n    \\\"node\\\",\\n    \\\"promise\\\",\\n    \\\"standard\\\"\\n  ],\\n  \\\"globals\\\": {\\n    \\\"document\\\": \\\"readonly\\\",\\n    \\\"navigator\\\": \\\"readonly\\\",\\n    \\\"window\\\": \\\"readonly\\\"\\n  },\\n  \\\"rules\\\": {\\n    \\\"semi\\\": 2\\n  },\\n}\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}